<template>
  <div>
    <el-form ref="form" :model="product" label-width="80px" class="edit">
      <el-row>
          <el-form-item label="产品名称 :">
            <el-input v-model="product.name" maxlength="10" show-word-limit></el-input>
          </el-form-item>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品线 :">
            <el-select v-model="product.productLine" placeholder="选择产品线" clearable>
              <el-option v-for="productLine in this.property.productLines" :key="productLine.id" :value="productLine.id"
                         :label="productLine.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品类 :">
            <el-select v-model="product.category" placeholder="选择品类" clearable>
              <el-option v-for="category in this.property.categories" :key="category.id" :value="category.id"
                         :label="category.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="系列 :">
            <el-select v-model="product.series" placeholder="选择系列" clearable>
              <el-option v-for="series in this.property.serieses" :key="series.id" :value="series.id" :label="series.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="克重 :">
            <el-input-number v-model="product.weight" :precision="2" :step="0.01" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="尺寸 :">
            <el-select v-model="product.size" placeholder="选择尺寸" clearable>
              <el-option v-for="size in this.property.sizes" :key="size.id" :value="size.name" :label="size.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="颜色 :">
            <el-select v-model="product.color" placeholder="选择颜色" clearable>
              <el-option v-for="color in this.property.colors" :key="color.id" :value="color.name" :label="color.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工艺 :">
            <el-select v-model="product.technology" placeholder="选择工艺" clearable>
              <el-option v-for="technology in this.property.technologies" :key="technology.id" :value="technology.name" :label="technology.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="形状 :">
            <el-select v-model="product.shape" placeholder="选择形状" clearable>
              <el-option v-for="shape in this.property.shapes" :key="shape.id" :value="shape.name" :label="shape.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="材质 :">
            <el-select v-model="product.material" placeholder="选择材质" clearable>
              <el-option v-for="material in this.property.materials" :key="material.id" :value="material.name" :label="material.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成色 :">
            <el-select v-model="product.purity" placeholder="选择成色" clearable>
              <el-option v-for="purity in this.property.purities" :key="purity.id" :value="purity.name" :label="purity.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="包装 :">
            <el-select v-model="product.packing" placeholder="选择包装类型" clearable>
              <el-option v-for="packing in this.property.packings" :key="packing.id" :value="packing.name" :label="packing.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检验（是否包含证书） :" label-width="190px">
            <el-switch
              class="switch"
              v-model="product.status"
              active-color="#00A854"
              active-text="有"
              :active-value="1"
              inactive-color="#F04134"
              inactive-text="无"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用途 :">
            <el-select v-model="product.purpose" placeholder="选择用途" clearable>
              <el-option v-for="purpose in this.property.purposes" :key="purpose.id" :value="purpose.name" :label="purpose.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="增值服务 :">
            <el-select v-model="product.service" placeholder="选择增值服务" clearable>
              <el-option v-for="service in this.property.services" :key="service.id" :value="service.name" :label="service.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="danger" @click="conserve()" class="btnConserveAdd">保存</el-button>
      <el-button type="success" @click="close()" class="btnCloseAdd">退出</el-button>
    </el-form>


  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "add",
  props:{
    property: Object
  },
  data() {
    return {
      product: {
        name: '',       //名称
        status: 0,      //状态
        addTime: '',    //添加时间
        productLineId: '',//产品线
        categoryId: '',   //品类
        seriesId: '',     //系列
        weight: '',     //克重
        size:'',        //尺寸
        color:'',       //颜色
        technology:'',  //工艺
        shape:'',       //形状
        material:'',    //材质
        purity:'',      //成色
        packing:'',     //包装
        inspection:1,   //检验标准
        purpose:'',     //用途
        service:''      //增值服务
      },
    }
  },

  methods: {
    conserve() {
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.product.addTime = y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      console.log(this.product.addTime)
      this.$emit('conserve', this.product);
    },
    close() {
      this.$emit('close');
    },
  }
}
</script>

<style scoped>
@import "../../../assets/css/basicdata.css";
</style>
